<template>
  <div id="app">
    <div id="nav">
      <div class="my-navbar">
        <div class="my-navbar-content">
          <div class="my-navbar-logo">
            <a href="/" target="_parent">大学生创业平台</a>
          </div>
          <div class="my-navbar-menu">
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              background-color="#2a5caa"
              mode="horizontal"
            >
              <!--开始导航栏的菜单的循环-->
              <template>
                <el-menu-item index="1"
                  ><a href="/" target="_parent">首页</a>
                </el-menu-item>
                <el-menu-item index="2"
                  ><a href="/projects" target="_parent">创业项目</a>
                </el-menu-item>
                <el-menu-item index="3"
                  ><a href="news" target="_parent">创业动态</a>
                </el-menu-item>
                <el-menu-item index="3"
                  ><a href="#" target="_parent">政策宣传</a>
                </el-menu-item>
              </template>
            </el-menu>
          </div>
          <div class="my-navbar-avatar">
            <!---如果用户没有登录，显示登录和注册的导航栏-->
            <!---暂时还没写呢？--->
            <div
              v-if="!loginInfo.id"
              class="el-menu-demo"
              style="line-height: 60px"
              background-color="#336699"
              mode="horizontal"
            >
              <a href="/login" target="_parent">登录</a>&nbsp;&nbsp;
              |&nbsp;&nbsp;
              <a href="/login" target="_parent">注册</a>
            </div>

            <!--如果用户已经登录则显示下面的菜单-->
            <el-menu
              v-if="loginInfo.id"
              class="el-menu-demo"
              background-color="#2a5caa"
              mode="horizontal"
            >
              <el-menu-item index="1">
                <template slot="title">
                  <el-avatar :size="28" :src="loginInfo.avatar"></el-avatar
                  >&nbsp;<span class="username-avatar">{{
                    loginInfo.nickname
                  }}</span>

                  &nbsp;
                  <a href="/poster" target="_parent">发布创业动态</a
                  >&nbsp;&nbsp; |&nbsp;&nbsp;
                  <a href="/login" target="_parent" @click="logout()">注销</a>
                </template>
              </el-menu-item>
            </el-menu>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import cookie from "js-cookie";
export default {
  data() {
    return {
      activeIndex: "1",
      loginInfo: {
        id: "",
        avatar: "",
        mobile: "",
        nickname: "",
      },
    };
  },
  mounted() {
    this.showUserInfo();
  },
  methods: {
    //显示用户信息
    showUserInfo() {
      var userStr = cookie.get("startup");
      if (userStr) {
        this.loginInfo = JSON.parse(userStr);
      }
    },
    // 注销用户
    logout() {
      cookie.set("startup", "", { domain: "localhost" });
      //跳转页面
      window.location.href = "/";
    },
  },
};
</script>
<style>
/*导航栏固定在页面顶部,外面必须套一个容器*/
#nav {
  width: 100%;
  height: 60px;
}

.my-navbar {
  width: 100%;
  text-align: center;
  background: #2a5caa;
  /*导航栏固定在页面顶部*/
  top: 0;
  left: 0;
  z-index: 200; /*这个值不要设置太大，否则会遮盖messagebox*/
  position: relative;
}

.my-navbar-content {
  width: 80%;
  margin: 0px auto;
  background: #2a5caa;
  display: flex;
}

.my-navbar-logo {
  width: 15%;
  height: 61px;
  line-height: 60px;
}

.my-navbar-menu {
  width: 60%;
  height: 61px;
  line-height: 60px;
  text-align: center;
}

.my-navbar-avatar a,
.my-navbar-avatar div {
  color: #fff;
  text-decoration: none;
  font-size: 10pt;
}

.my-navbar-logo a {
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: #fff;
  text-decoration: none;
  font-size: 14pt;
}

.my-navbar-logo {
  color: #fff;
  text-decoration: none;
  font-size: 14pt;
}

.my-navbar-logo a img {
  vertical-align: middle;
}

.el-menu-item {
  color: #fff;
}

.el-menu-item,
.el-submenu {
  width: 100px;
}

.my-navbar-menu-subitem {
  width: 100%;
  text-align: center;
}

.el-menu li {
  color: #fff;
}

.el-menu-item a:hover {
  color: #fff;
}

.el-menu-item.is-active {
  color: #fff;
  background: #2a5caa;
}

.el-menu-item.is-active a {
  color: #fff;
}

.el-menu-item a {
  color: #fff;
}

.el-menu-item a {
  text-decoration: none;
}

.el-submenu div {
  color: #fff !important;
}

/* 深选择器：如果相对设置了scoped的子组件里的元素进行控制可以使用'>>>'或者'deep'设置选中或悬浮的颜色*/
.el-submenu /deep/ .el-submenu__title {
  color: #fff !important;
}

.el-menu-item {
  color: #fff !important;
}

.el-avatar {
  overflow: hidden;
}
</style>